<template>
	<yb-popup direction="top" :visible="visible" @hide="hide" :options="{
		position: 'absolute'
	}">
		<view class="filter-pannel yb-flex" :style="{
			'background-color': skinColor.color_bg_2,
			height: height ? app.$utils.pixelunit(height) : (windowHeight / 2) + 'px'
		}">
			<yb-gap :size="top"></yb-gap>
			<yb-list type="scroll" custom-class="yb-flex-1">
				<view class="yb-flex padding-gap">
					<template v-if="compressShow">
						<text class="filter-title" :style="{color: skinColor.color_1}">综合</text>
						<yb-grid :data="compressTypes" :column="4" :gap="20">
							<template v-for="(grid, i) in compressTypes" :slot="i">
								<view @tap="changeType(grid)">
									<yb-tag
									:options="{
										bgColor: skinColor.color_gap_1,
										color: valueSync == grid.value ? skinColor.color_actived_1 : skinColor.color_3
									}"
									:value="grid.label"></yb-tag>
								</view>
							</template>
						</yb-grid>
					</template>
					<template v-if="singleShow">
						<text class="filter-title" :style="{color: skinColor.color_1}">资源</text>
						<yb-grid :data="singleTypes" :column="4" :gap="20">
							<template v-for="(grid, i) in singleTypes" :slot="i">
								<view @tap="changeType(grid)">
									<yb-tag
									:options="{
										bgColor: skinColor.color_gap_1,
										color: valueSync.split(',').indexOf(grid.value) > -1 ? skinColor.color_actived_1 : skinColor.color_3
									}"
									:value="grid.label"></yb-tag>
								</view>
							</template>
						</yb-grid>
					</template>
					<template v-if="gatherShow">
						<text class="filter-title" :style="{color: skinColor.color_1}">合集</text>
						<yb-grid :data="gatherTypes" :column="4" :gap="20">
							<template v-for="(grid, i) in gatherTypes" :slot="i">
								<view @tap="changeType(grid)">
									<yb-tag
									:options="{
										bgColor: skinColor.color_gap_1,
										color: valueSync.split(',').indexOf(grid.value) > -1 ? skinColor.color_actived_1 : skinColor.color_3
									}"
									:value="grid.label"></yb-tag>
								</view>
							</template>
						</yb-grid>
					</template>
					<template v-if="characterShow">
						<text class="filter-title" :style="{color: skinColor.color_1}">用户</text>
						<yb-grid :data="characterTypes" :column="4" :gap="20">
							<template v-for="(grid, i) in characterTypes" :slot="i">
								<view @tap="changeType(grid)">
									<yb-tag
									:options="{
										bgColor: skinColor.color_gap_1,
										color: valueSync.split(',').indexOf(grid.value) > -1 ? skinColor.color_actived_1 : skinColor.color_3
									}"
									:value="grid.label"></yb-tag>
								</view>
							</template>
						</yb-grid>
					</template>
					<yb-gap :size="30"></yb-gap>
				</view>
			</yb-list>
		</view>
	</yb-popup>
</template>

<script>
	import appMixin from '@/common/mixin/app.js';
	export default {
		mixins: [appMixin],
		props: {
			value: {
				type: [String, Number],
				default: ''
			},
			visible: {
				type: Boolean,
				default: false
			},
			top: {
				type: [String, Number],
				default: 0
			},
			height: {
				type: [String, Number],
				default: 0
			},
			//展示综合类型
			compressShow: {
				type: Boolean,
				default: true
			},
			//展示单个类型
			singleShow: {
				type: Boolean,
				default: true
			},
			//展示合集类型
			gatherShow: {
				type: Boolean,
				default: true
			},
			//展示用户类型
			characterShow: {
				type: Boolean,
				default: true
			},
			compressList: {
				type: Array,
				default () {
					return new Array
				}
			},
			singleList: {
				type: Array,
				default () {
					return new Array
				}
			},
			gatherList: {
				type: Array,
				default () {
					return new Array
				}
			},
			characterList: {
				type: Array,
				default () {
					return new Array
				}
			}
		},
		computed: {
			compressTypes () {
				return this.compressList.length > 0 ? this.compressList : [{
					label: '所有资源',
					value: 'compress'
				},{
					label: '单个资源',
					value: 'single'
				},{
					label: '集合资源',
					value: 'gather'
				},{
					label: '用户资源',
					value: 'character'
				}]
			},
			singleTypes () {
				return this.singleList.length > 0 ? this.singleList : Object.keys(this.app.$config.singleTypes).map(key => {
					return {
						label: this.app.$config.singleTypes[key],
						value: key
					}
				})
			},
			gatherTypes () {
				return this.gatherList.length > 0 ? this.gatherList : Object.keys(this.app.$config.gatherTypes).filter(key => key != 'rank').map(key => {
					return {
						label: this.app.$config.gatherTypes[key],
						value: key
					}
				})
			},
			characterTypes () {
				return this.characterList.length > 0 ? this.characterList : Object.keys(this.app.$config.characterTypes.single).map(key => {
					return {
						label: this.app.$config.characterTypes.single[key],
						value: key
					}
				})
			}
		},
		data () {
			return {
				valueSync: '',
				windowHeight: 0
			}
		},
		created() {
			this.windowHeight = uni.getSystemInfoSync().windowHeight
		},
		mounted() {
			this.valueSync = this.value
		},
		methods: {
			changeType (filter) {
				if ( this.compressTypes.findIndex(comp => comp.value == filter.value) > -1 ) {
					if ( this.valueSync != filter.value ) {
						this.valueSync = filter.value
					}
				} else {
					let arr = this.compressTypes.findIndex(comp => comp.value == this.valueSync) > -1 ? [] : this.valueSync.split(',').map(val => val.trim())
					if ( arr.indexOf(filter.value) == -1 ) {
						arr.push(filter.value)
						this.valueSync = arr.toString()
					} else {
						if ( arr.length > 1 ) {
							arr.splice(arr.indexOf(filter.value), 1)
							this.valueSync = arr.toString()
						} else {
							this.valueSync = 'compress'
						}
					}
				}
			},
			confirm () {
				this.$emit('confirm', this.valueSync)
			},
			hide () {
				this.confirm()
				this.$emit('update:visible', false)
			}
		},
		watch: {
			value (newVal) {
				this.valueSync = newVal
			}
		}
	}
</script>

<style>
	.filter-title {
		font-size: 26rpx;
		margin: 20rpx 0;
	}
	.filter-btns {
		margin: 20rpx 0 10rpx 0;
		padding: 0 80rpx;
	}
	.filter-btn {
		height: 65rpx;
	}
</style>